<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<!-- 
		Replace path to template, title, header and body
		with actual data.
	 -->
<ui:composition template="/templates/store.xhtml">
	<ui:define name="pageTitle">Liste des rêves</ui:define>
	<ui:define name="pageHead"></ui:define>
	<ui:define name="first"></ui:define>
	<ui:define name="body">

		<div class="row">

			<h1>Liste des rêves</h1>

			<dl class="sub-nav">
				<dt>Tri :</dt>
				<dd class="active">
					<a href="#">Plus anciens</a>
				</dd>
				<dd>
					<a href="#">Plus récents</a>
				</dd>
			</dl>

			<div class="big-10 medium-9 small-12 small-pull-12 columns">
				<table>
					<thead>
						<tr>
							<th width="50">Référence</th>
							<th width="250">Titre</th>
							<th width="50">Durée / nb personnes</th>
							<th width="50">Stocks</th>
							<th width="50">Prémonitoire</th>
							<th width="40">Réalisme</th>
							<th width="50">Catégories</th>
							<th width="30">Prix</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td><a href="#" data-reveal-id="updateReve">Je suis
									Chuck Norris</a></td>
							<td>60 / 1</td>
							<td><a href="#" data-reveal-id="gestionStocks">54</a></td>
							<td>Non</td>
							<td>80%</td>
							<td>Rêves de gloire</td>
							<td>120€</td>
						</tr>
						<tr>
							<td>2</td>
							<td><a href="#" data-reveal-id="updateReve">Je mange une
									barbapapa géante</a></td>
							<td>40 / 2</td>
							<td><a href="#" data-reveal-id="gestionStocks">26</a></td>
							<td>Oui</td>
							<td>100%</td>
							<td>Coquins</td>
							<td>60€</td>
						</tr>
						<tr>
							<td>2</td>
							<td><a href="#" data-reveal-id="updateReve">Je mange une
									barbapapa géante</a></td>
							<td>40 / 2</td>
							<td><a href="#" data-reveal-id="gestionStocks">26</a></td>
							<td>Oui</td>
							<td>100%</td>
							<td>Coquins</td>
							<td>60€</td>
						</tr>
						<tr>
							<td>2</td>
							<td><a href="#" data-reveal-id="updateReve">Je mange une
									barbapapa géante</a></td>
							<td>40 / 2</td>
							<td><a href="#" data-reveal-id="gestionStocks">26</a></td>
							<td>Oui</td>
							<td>100%</td>
							<td>Coquins</td>
							<td>60€</td>
						</tr>
						<tr>
							<td>2</td>
							<td><a href="#" data-reveal-id="updateReve">Je mange une
									barbapapa géante</a></td>
							<td>40 / 2</td>
							<td><a href="#" data-reveal-id="gestionStocks">26</a></td>
							<td>Oui</td>
							<td>100%</td>
							<td>Coquins</td>
							<td>60€</td>
						</tr>
					</tbody>
				</table>
				<div class="pagination-centered">
					<ul class="pagination">
						<li class="arrow unavailable"><a href="">&laquo;</a></li>
						<li class="current"><a href="">1</a></li>
						<li><a href="">2</a></li>
						<li><a href="">3</a></li>
						<li><a href="">4</a></li>
						<li class="unavailable"><a href="">&hellip;</a></li>
						<li><a href="">12</a></li>
						<li><a href="">13</a></li>
						<li class="arrow"><a href="">&raquo;</a></li>
					</ul>
				</div>
			</div>
			<div class="big-2 medium-3 small-12 columns">
				<h3>Recherche</h3>
				<br /> <label>Référence rêve</label> <input type="text"
					placeholder="Entrez la référence" /> <a href="#"
					class="button radius">Rechercher</a> <a href="#"
					class="button radius alert">Réinitialiser</a> <br /> <br /> <br />
				<br /> <a href="#" data-reveal-id="createReve"
					class="button radius success">Créer un rêve</a>
			</div>
		</div>
		<div id="createReve" class="reveal-modal" data-reveal="true">
			<ui:include src="./forms/creerReve.xhtml" />
		</div>
		<div id="updateReve" class="reveal-modal" data-reveal="true">
			<ui:include src="./forms/modifierReve.xhtml" />
		</div>
		<div id="gestionStocks" class="reveal-modal small" data-reveal="true">
			<ui:include src="./forms/gestionStocks.xhtml" />
		</div>

	</ui:define>
	<ui:define name="last">
		<!-- Other JS plugins can be included here -->
		<script>
    $('#dateModifStock').datetimepicker({
    	 lang:'fr',
    	 timepicker:false,
    	 format:'d/m/Y'
    	});
  </script>
	</ui:define>
</ui:composition>

</html>